column 的移動是

現在需要把資料的結構更改一下

jobs: [{
        id: "0",
        // column 名稱
        jobName: "To Do",
        // column 裡面的卡片
        card: [{
                name: 'Lucy'
            },
            {
                name: 'Amy'
            },
            {
                name: 'peter'
            },
            {
                name: 'test'
            }
        ]
    },
    {
        id: "1",
        jobName: "In progress",
        card: []
    },
    {
        id: "2",
        jobName: "Done",
        card: []
    }
],

把之前的程式碼結合起來！

<div class="container machine-contents mt-3">
    <draggable v-model="jobs">
        <transition-group name="list-complete" class="row d-flex justify-content-center">
            <div v-for="(job, index) in jobs" v-bind:key="job.jobName" class="list-complete-item col-md">
                <div class="column card grab card-title-color" style="background-color:#ededed">
                    <div class="card-body">
                        <div>
                            {{ job.jobName }}
                        </div>
                        <div>
                            <draggable v-model="job.card" class="dragArea" :options="{group:{ name:'people' }}">

                                <div v-for="(element, index) in job.card" :key="index">
                                    <a data-toggle="modal" data-target="#exampleModal">
                                        <div class="task card grab my-2" style="background-color:#f8f8f8">
                                            <div class="card-body text-center">
                                                {{ element.name }}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </draggable>
                            <a data-toggle="modal" :data-target="'#'+job.id">
                                <div class="task card grab my-2" style="background-color:#f8f8f8">
                                    <div class="card-body p-0 py-1">
                                        <h2 class="text-center m-0">+</h2>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- 新增卡片model -->
                    <div class="modal fade" :id="job.id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Add Card</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="btn-group">
                                        <h5 class="mr-3 mb-0 d-flex align-items-center">Task Name:</h5>
                                        <input type="text" placeholder="Task" v-model="addTask">                                               
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    <button v-on:click="addCard(job.id)" type="button" data-dismiss="modal" class="btn btn-primary">Add</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--  -->
                </div>
            </div>
        </transition-group>
    </draggable>
</div>

這樣就有一個完整可以拖拉的卡片跟 Column 摟